<template>
    <div class="top-nav">
        <div class="nav">
            <div class="nav-left">
                ~ 欢迎光临！
                <span v-if="userInfo!==null">{{userInfo.username}}</span>
            </div>
            <div class="nav-right">
                <ul>

                    <li v-if="userInfo==null">
                        <a href="#/login" >登陆</a>
                        <span>/</span>
                    </li>
                    <li v-else>
                        <a href="javascript:;" @click="loginOut">退出</a>
                    </li>
                    <li v-if="userInfo==null"><a href="#/register">注册</a> <span>/</span></li>
                    <li @click="Service">客户服务<span>/</span></li>
                    <li><a href="javascript:;" @click="myOrder" style="text-decoration: none;color: #666;">我的订单</a><span>/</span></li>
                    <li class="userInfo" @mousemove="activeMove" @mouseleave="activeLeave" v-if="userInfo!==null">
                        <div @click="toUser()"> 个人信息<i class="el-icon-caret-bottom"></i></div>
                        <div class="userProfile">
                            <div class="userHead">
                                <!-- 用户头像 -->
                                <div>
                                    <el-avatar :size="50" >
                                        <img :src="userImg" alt="">
                                    </el-avatar>
                                </div>
                                
                                <div class="detail">
                                    ~欢迎回来~{{userInfo.username}} 
                                </div>
                            </div>
                            <div class="userChoice">
                                <div>
                                    <span><a href="#/userDetail">基本信息</a></span>
                                    <span><a href="#/userSecure">安全设置</a></span>
                                    <span><a href="#/userOrder">我的订单</a></span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <el-dialog
            
            :visible.sync="dialogVisible"
            width="60%"
            
            >
            <span slot="title" >
                <span style="font-size:14px;font-weight:600;">
                    <i class="el-icon-headset" style="color:orange;font-weight:700;"></i>
                    电脑客服
                </span>
            </span>

            <div>
                <Chat></Chat>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import Chat from '../../components/Chat.vue'
export default {
    components: {
        Chat
    },
    data() {
        return {
            // 用户头像
            userImg: '',
            // 客服dialog
            dialogVisible: false,
            // 图片服务器地址
            imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',
        }
    },
    computed:{
        ...mapState({
           userInfo : state => state.user.userInfo
        })
    },
    methods:{
        toUser(){
            this.$router.push('/userDetail')
        },
        activeMove(){
            const activeli = document.getElementsByClassName('userProfile')
            activeli[0].style.opacity = '1'
            activeli[0].style.height = '90px'
            activeli[0].style.display = 'block'
        },
        activeLeave(){
            const activeli = document.getElementsByClassName('userProfile')
            activeli[0].style.opacity = '0'
            activeli[0].style.height = '0px'
            setTimeout(() => {
                activeli[0].style.display = 'none'
            }, 0);
        },

        // 获取用户信息
        async getUserInfo(){
            const {data:res} = await this.$http.get('/user/info')
            console.log('用户信息：', res)
            if(res.code == 200){
                window.sessionStorage.setItem('userInfo', JSON.stringify(res.data))
                this.$store.commit('setUserInfo', res.data)
            }
        },
        // 退出登录，清空token
        loginOut(){
            this.$router.push('/index')
            window.sessionStorage.clear()
            setTimeout(()=>{
                window.location.reload()

            },100)
            
        },
        // 跳转到订单页
        myOrder(){
            this.$router.push('/userOrder')
        },
        // 显示客服
        Service(){
            this.dialogVisible = true
        }
    },
    created(){
        // 判断是否存在用户信息，无则使用接口获取
        if(window.sessionStorage.getItem('token')){
            console.log('检查userInfo:', this.userInfo)
            if(this.userInfo){
               console.log('user在vuex中存在')
               if(this.userInfo.headUrl){
                    this.userImg = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/' + this.userInfo.headUrl
                }
            }else{
                console.log('user不在vuex中存在，重新调用接口获取userInfo')
                this.getUserInfo()
                // console.log(JSON.parse(window.sessionStorage.getItem('userInfo')).username)
                // console.log('user不在vuex中存在，尝试从sessionStroage中获取')
                if(window.sessionStorage.getItem('userInfo')){
                    var user = JSON.parse(window.sessionStorage.getItem('userInfo'))
                    if(user.headUrl){
                        this.userImg = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/' + user.headUrl
                    }
                }
            }
        }
        // console.log('头像：', this.userImg)
    }
}
</script>

<style lang="scss" scoped>
.top-nav{
    height: 30px;
    // position: relative;
    z-index: 10;
    background-color: #f5f5f5;
    color: #666;
    font-size: 12px;
}
.nav{
    width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    line-height: 27px;
    display: flex;
    justify-content: space-between;
    .nav-left{
        
    }
    .nav-right{
        ul{
            list-style: none;
            li{
                float: left;
                cursor: pointer;
                height: 30px;
                line-height: 30px;
                padding: 0 9px;
                span{
                    color: #ccc;
                    padding-left: 9px;
                    font-weight: bold;
                }
                i{
                    padding-left: 5px;
                }
            }
        }
    }
}

// 个人信息
.userInfo:hover{
    background-color: #fff;
    box-sizing: border-box;
    // border: 1px solid #eee;
    border-bottom: none;
}
.userInfo{
    position: relative;
    z-index: 11;
    
    .userProfile{
        // height: 0px;
        width: 220px;
        opacity: 0;
        background-color: #fff;
        // box-sizing: border-box;
        border: 1px solid #eee;
        border-top: none;
        position: absolute;
        right: 0;
        // transition: all 0.5s;
        cursor: pointer;
        .userHead{
            display: flex;
            align-items: center;
            padding: 2px 18px;
            // border:1px solid red;
            border-bottom: 1px solid #eee;
            .detail{
                width: 100%;
                padding-left: 20px;
                // border-bottom: 1px solid #ddd;
            }
            // 头像样式
            .el-avatar{
                border: 1px solid rgb(243, 219, 190);
                background-color: rgb(252, 251, 249);
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 5px;
                position: relative;
                img{
                    border-radius: 50%;
                    width: 90%;
                    height: 90%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: #fff;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                }
            }
        }
        .userChoice{
            padding-left: 15px;
        }
    }
}

/deep/.el-dialog__wrapper{
    background: rgba(51, 51, 51, 0.9);
}

</style>